<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #qwe {
        background-color: pink;
        width: 100px;
        height: 100px;
        position: relative;
        left: 0px;

        border: 5px green solid;
    }

    pre {
        font-size: 26px;
        font-weight: bolder;
    }
    #title{
        font-size: 30px;
        color: red;
    }
</style>
<body>

<pre id="title">

    知识点: 打开 console.log()
    哈哈哈 , style.width 获取不到值???
    是因为:必须声明在div中div.style.width才有值
    推荐使用:getStyle函数

</pre>

<pre>
    setInterval: 设置时间间隔
    offsetLeft: 左边 + 100px
</pre>


<div id="qwe">QWE</div>


</body>

<script>

    var qwe_div = document.getElementById("qwe");

    alert(getStyle(qwe_div , 'width'));
    alert(qwe_div.offsetWidth);     // offsetWidth -> 加上边框的 5px
    alert(qwe_div.style.width);

    alert("哈哈哈 , style.width 获取不到值???是因为:必须声明在div中div.style.width才有值");

    function getStyle(obj , attr) {
        if (obj.currentStyle){      // 如果是 IE浏览器的话
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj , false)[attr];
        }
    }


</script>
</html>